<!-- 票务专区 -->
<template >
    <div class="head">
        <van-nav-bar title="票务专区" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="all">
        <div class="tickets" v-for="(item, index) in ticketsData" :key="item.id" @click="showPopup(item.id)">
            <img class="picture" :src=item.img alt="">
            <div class="bottom">
                <div class="left">
                    <p>{{ item.title }}</p>
                    <p class="price">{{ item.price }}元</p>
                </div>
                <van-icon name="cart-circle-o" size="40px" color="#1296db" />
            </div>
        </div>
    </div>
    <van-popup v-model:show="show" closeable round :style="{ padding: '40px 20px' }" >
        <div class="ticket">
            <img :src=ticketImg alt="">
            <div class="ticketdata">
                <p class="ticketname">{{ ticketNmae }}</p>
                <p class="ticketprice">
                    ￥{{ ticketPrice * value }}
                </p>
                <div class="ticketnum">
                    数量：<van-stepper v-model="value" />
                </div>
            </div>
        </div>
        <van-button type="primary" size="large" @click="order">立即支付</van-button>
    </van-popup>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';
import { showToast } from 'vant';
export default {
    setup() {
        let scienceData = JSON.parse(sessionStorage.getItem("scienceData"))
        let userId = sessionStorage.getItem('userId')
        let userData
        const onClickLeft = () => history.back();
        console.log(scienceData);
        let ticketsData = ref([])
        let ticketId
        let ticketImg = ref('')
        let ticketPrice = ref()
        let ticketNmae = ref('')
        const value = ref(1);
        axios({ //请求用户信息
            url: "/api/user/userinfo", // url
            params: {
                // 参数
                id: userId
            },
        })
            .then(function (res) {
                console.log(res); // 成功回调
                userData = res.data.user
            })
            .catch(function (err) {
                console.log(err); // 失败回调
            });
        axios({ //请求票务信息
            url: "/api/menu/index", // url
            params: {
                // 参数
                scienceid: scienceData.id
            },
        })
            .then(function (res) {
                console.log(res); // 成功回调
                ticketsData.value = res.data.data
            })
            .catch(function (err) {
                console.log(err); // 失败回调
            });
        const show = ref(false);
        const showPopup = (id) => {
            show.value = true;
            ticketId = id
            value.value = 1
            axios({
                url: "/api/menu/detail", // url
                params: {
                    // 参数
                    id: ticketId,
                    scienceid: scienceData.id
                },
            })
                .then(function (res) {
                    console.log(res); // 成功回调
                    ticketImg.value = res.data.img
                    ticketNmae.value = res.data.data.title
                    ticketPrice.value = res.data.data.price
                })
                .catch(function (err) {
                    console.log(err); // 失败回调
                });
        };
        function order() { //订单下单
            let allprice = ticketPrice.value * value.value
            axios({
                url: "/api/order/order", // url
                params: {
                    // 参数
                    sorts: ticketNmae,
                    sciencename: scienceData.name,
                    price: allprice,
                    phone: userData.phone,
                    userid: userId,
                    menuid: ticketsData,
                    num: value.value,
                    type: ticketId,
                    scienceid: scienceData.id
                },
            })
                .then(function (res) {
                    console.log(res); // 成功回调
                    show.value = false
                    showToast(res.data.msg)
                })
                .catch(function (err) {
                    console.log(err); // 失败回调
                });
        }
        return {
            onClickLeft,
            ticketsData,
            show,
            showPopup,
            ticketImg,
            ticketNmae,
            ticketPrice,
            value,
            order,
            showToast,
        };
    },
}
</script>

<style scoped>
.head {
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
}


.all {
    width: 100%;
    min-height: 100vh;
    padding-top: 46px;
    max-height: auto;
    background-color: rgb(241, 241, 241);
}

.tickets {
    width: 95%;
    height: auto;
    margin: 10px 2.5%;
    border-radius: 10px;
    box-shadow: inset;
    background-color: white;
}

.picture {
    width: 100%;
    height: 200px;
    padding: 5px 5px;
    border-radius: 10px;
}

.bottom {
    width: 100%;
    height: auto;
    padding: 5px 5%;
    display: flex;
    justify-content: space-between;
}

.left p {
    line-height: 1.5;
    font-size: 14px;
}

.price {
    color: red;
}

.ticket {
    width: 100%;
    height: auto;
    display: flex;
    margin-bottom: 20px;
}

.ticket img {
    width: 100px;
    height: 100px;
}

.ticketdata {
    width: 200px;
    padding-left: 10%;
}

.ticketname {
    font-weight: bold;
    font-size: 18px;
}

.ticketprice {
    color: red;
    line-height: 2.5;
    font-size: 18px;
}
</style>
